<!-- 批量导入 -->
<template>
  <div class="">
    
    <el-card class="box-card">
      <upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload"/>
      <div style="float:right;margin:10px">
        <el-button type="primary" @click="addTable">添加表</el-button>
        <el-button type="primary" @click="handleWrite">写入</el-button>
      </div>
    </el-card>
    <el-card class="box-card">
      <el-form :model="tableData" class="demo-form-inline">
        <el-select
          v-model="selectColumnValue"
          class="edit-input"
          size="small"
          @change="selectChange"
        >
          <el-option v-for="(item,index) in tables" :key="index" :label="item" :value="item"></el-option>
        </el-select>
        <div v-if="showList">
          <el-row v-for="(item,index) in tableData.formData" :key="index" :gutter="20">
            <el-col :span="4">
              <el-form-item>
                <el-select v-model="item.field" class="edit-input" size="small">
                  <el-option
                    v-for="(item,index) in excelColumn"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-input v-model="item.column">
                  <template slot="prepend">数据库字段名</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item>
                <el-select v-model="item.type" class="edit-input" size="small">
                  <el-option v-for="(item,index) in type" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-switch
                  v-model="item.hash"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="自动生成"
                ></el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-select v-model="item.foreignTable" class="edit-input" size="small">
                  <el-option
                    v-for="(item,index) in tableColumn"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import UploadExcelComponent from "@/components/UploadExcel/index.vue";
import { getTableColumns, getTableNames, intoList } from "@/api/batchImport";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "UploadExcel",
  components: { UploadExcelComponent },
  data() {
    //这里存放数据
    return {
      showTable: false,
      showList: false,
      excelColumn: [],
      tables: [],
      tableColumn: [],
      selectColumnValue: "",
      chooseMenu: "",
      tableData: {
        formData: [
          {
            field: "",
            column: "",
            type: "",
            hash: "",
            foreignTable: ""
          }
        ]
      },
      type: ["文字", "数字", "日期"]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    beforeUpload(file) {
      console.log(file);
      return true;
    },
    handleSuccess({ results, header }) {
      console.log(results, header);
      this.excelColumn = header;
    },
    selectChange(val) {
      this.tableData.formData = [];
      this.showList = true;
      this.chooseMenu = val;
      getTableColumns(val).then(response => {
        this.tableColumn = response.body;
        for (let index = 0; index < response.body.length; index++) {
          this.tableData.formData.push({
            column: response.body[index]
          });
        }
      });
    },
    addTable() {
      this.showTable = true;
    },
    handleWrite() {
      const formData = { [this.chooseMenu]: this.tableData.formData };
      console.log("formData", formData);
      this.tableData = formData;
      const data = { json: this.tableData };
      console.log("table", data);
      // let data = { json: tableData };
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    getTableNames().then(response => {
      this.tables = response.body;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.box-card {
  margin: 20px 10px 10px 10px;
}
</style>